<template>
  <transition mode="out-in" name="slide-left"
    :enter-active-class="'slide-active'"
    :leave-active-class="'slide-active'">
    <div class="article-main">
      <div class="lists-top">
        <img :src="details.url" alt="">
      </div>
      <div class="author-msg">
        <div class="author-img"><img src="@/assets/img/rz-tx001.jpg"></div>
        <p class="author-name">{{details.writer}}</p>
        <button class="concern">关注</button>
      </div>
      <h3>{{details.title}}</h3>
      <div class="author-msg pinglun-msg">
        <p class="praise-num">
          <span><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-icon-test"></use>
            </svg>
          </span><i>{{details.commentCount}}</i>
          <span><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-zan01"></use>
            </svg>
          </span><i>{{details.reviewCount}}</i>
          <span><svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-diary-pinglun"></use>
            </svg>
          </span><i>{{details.noteCount}}</i></p>
      </div>
      <p class="article-content" v-html="details.abstract"></p>
      <div class="message-box">
        <h4>{{listTotal}}条评论</h4>
        <ul>
          <li v-for="items in messageLists" :key="items.id">
            <div class="writer-box">
              <div class="face-img"><img src="@/assets/img/rz-tx001.jpg"></div>
              <div class="writer-msg flex-box">
                <p class="writer-name">{{items.message_nickname}}</p>
                <p class="write-time">{{items.message_post_time}}</p>
              </div>
              <div class="clap-box"></div>
            </div>
            <div class="msg-box" v-html = "items.message_content"></div>
          </li>
        </ul>
        <h5 v-if="listTotal" @click="viewMore">{{viewMoremessage}}</h5>
      </div>
      <remarkFooter v-on:reviewMessage="reviewMessage"></remarkFooter>
    </div>
  </transition>
</template>

<script>
// @ is an alias to /src
import remarkFooter from "@/components/remark-footer";
export default {
  name: "articlePage",
  data() {
    return {
      details: "",
      messageLists: "",
      listTotal: "",
      pageSize: 1,
      viewMoremessage: "查看更多回复",
      replay: {
        message_nickname: "",
        message_content: "",
        article_id: "",
        message_uuid: "",
        message_headimg: ""
      }
    };
  },
  components: {
    remarkFooter
  },
  computed: {},
  methods: {
    getMessageData(pageNum, pageSize) {
      let articleId = this.$route.params.articleDetail,
        appSignMd5 = this.$md5(
          this.$appKeyWords.app_key +
            'daxiong_message["id DESC"]' +
            pageNum +
            "" +
            pageSize +
            'App.Table.FreeQuery[["article_id","=",' +
            articleId +
            "]]" +
            this.$appKeyWords.app_secret
        ).toUpperCase();
      // console.log(appSignMd5);
      this.$axios
        .get(
          '/api/?s=App.Table.FreeQuery&model_name=daxiong_message&where=[["article_id","=",' +
            articleId +
            "]]&page=" +
            pageNum +
            "&perpage=" +
            pageSize +
            '&order=["id DESC"]&app_key=' +
            this.$appKeyWords.app_key +
            "&sign=" +
            appSignMd5
        )
        .then(data => {
          // console.log(data);
          this.messageLists = data.data.data.list;
          this.listTotal = data.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
    reviewMessage() {
      this.getMessageData(1, 4);
      this.pageSize = 1;
      this.viewMoremessage = "查看更多回复";
    },
    viewMore() {
      this.pageSize++;
      if (this.pageSize * 4 > this.listTotal + 4) {
        this.viewMoremessage = "没有更多回复了";
        return false;
      } else {
        this.getMessageData(1, 4 * this.pageSize);
      }
      // console.log(this.pageSize);
    }
  },
  created() {},
  mounted() {
    // console.log(this.$route.params);
    // console.log(this.$route);
    this.$axios
      .get("/api/?s=App.Main_Set.GetItem&id=2&app_key=" + this.$appKeyWords.app_key)
      .then(data => {
        // console.log(data);
        // this.details = data.data.data.data
        let lists = data.data.data.data;
        // console.log(lists);
        for (let i = 0; i < lists.length; i++) {
          if (lists[i].id === this.$route.params.articleDetail) {
            this.details = lists[i];
          }
          // console.log(lists[i]);
        }
      })
      .catch(err => {
        self.fetchError = err;
      });
    this.getMessageData(1, 4);
  }
};
</script>
<style scoped lang="scss">
.article-main {
  width: 100%;
  height: 100vh;
  padding-bottom: r(90);
  box-sizing: border-box;
  overflow-y: auto;
  background: #fff;
  .lists-top {
    width: 100%;
    img {
      width: 100%;
    }
  }
  h3 {
    font-size: r(36);
    text-align: left;
    color: #333;
    line-height: r(38);
    @include setPm(padding, 0, 28, 0, 28);
  }
  .author-msg {
    width: 100%;
    overflow: hidden;
    color: #999;
    @include setPm(padding, 36, 24, 36, 24);
    box-sizing: border-box;
    .author-img {
      width: r(60);
      height: r(60);
      display: block;
      border-radius: 100%;
      border: 1px solid #f0f0f0;
      float: left;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .concern {
      float: right;
      background: #1ba1f6;
      color: #fff;
      border-radius: r(6);
      border: none;
      font-size: r(24);
      line-height: r(36);
      padding-left: r(24);
      padding-right: r(24);
      padding-top: r(6);
      padding-bottom: r(6);
    }
    p.author-name {
      display: block;
      font-size: r(28);
      color: #333;
      float: left;
      @include setPm(margin, 22, 0, 0, 12);
    }
    p.praise-num {
      display: block;
      float: left;
      font-size: r(28);
      span {
        float: left;
        font-size: r(48);
        display: block;
        color: #666;
      }
      i {
        float: left;
        display: block;
        margin-top: r(12);
        margin-left: r(6);
        margin-right: r(24);
      }
    }
  }
  .pinglun-msg {
    border-bottom: 1px solid #eee;
    padding-top: r(20);
    padding-bottom: r(20);
  }
  p.article-content {
    font-size: r(28);
    color: #666;
    box-sizing: border-box;
    line-height: r(42);
    margin-top: r(20);
    @include setPm(padding, 12, 24, 12, 24);
    text-align: left;
    text-indent: r(42);
  }
  .message-box {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    border-top: 8px solid #eee;
    @include setPm(padding, 0, 24, 0, 24);
    h4 {
      font-size: r(28);
      color: #000;
      line-height: r(88);
    }
    h5 {
      width: 100%;
      text-align: center;
      font-size: r(28);
      color: #999;
      line-height: r(88);
    }
    ul {
      display: block;
      overflow: hidden;
      li {
        display: block;
        width: 100%;
        float: left;
        padding-top: r(24);
        padding-bottom: r(24);
        border-top: 1px solid #eee;
        .writer-box {
          float: left;
          width: 100%;
          .face-img {
            width: r(60);
            height: r(60);
            display: block;
            border-radius: 100%;
            border: 1px solid #f0f0f0;
            float: left;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .writer-msg {
            height: r(60);
            margin-left: r(16);
            float: left;
            flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            p {
              display: block;
              float: left;
              width: 100%;
              &.writer-name {
                margin-top: r(4);
                font-size: r(28);
                line-height: r(30);
                color: #333;
              }
              &.write-time {
                margin-top: r(4);
                font-size: r(20);
                line-height: r(22);
                color: #999;
              }
            }
          }
        }
        .msg-box {
          padding-top: r(24);
          padding-bottom: r(24);
          float: left;
          width: 100%;
          img {
            width: r(36);
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.article-main {
  .message-box {
    ul li .msg-box {
      font-size: r(28);
      color: #666;
      p {
        font-size: r(28);
        line-height: r(36);
        color: #666;
      }
      img {
        height: r(36);
      }
    }
  }
}
</style>
